<template>
    <Head>
        <Title>{{ menu.name }}</Title>
        <Meta name="description" :content="menu.description" />
        <Meta name="keywords" :content="menu.keywords" />
    </Head>
    <div class="index-navs">
        <NuxtLink to="/">首页</NuxtLink>
        <i class="ri-arrow-right-s-line" />
        <NuxtLink :to="{ name: 'list-id', params: { id: menu.id } }">{{ menu.name }}</NuxtLink>
    </div>
    <AppLoading :pending="pending" :total="total === 0">
        <!-- 文章卡片 -->
        <Articles :data="list" />
        <!-- 分页 -->
        <div v-if="total > pageSize" class="app-pages">
            <Page :total="total" :page-size="pageSize" :page-num="pageNum" />
        </div>
    </AppLoading>
</template>
<script setup lang="ts">
/**
 * 菜单详情
 */
const { data } = await menuDetailsApi(states().paramsId!)
const menu = computed(() => data.value?.data ?? {} as MenuVo)
/**
 * 菜单文章筛选列表
 */
const { list, pending, total, pageNum, pageSize } = await articleMenuApi(states().pageNum, states().paramsId!)
</script>